<template>
  <div class="query">
    <div class="check">
      <div class="c_left">条件搜索栏</div>
      <div class="c_right" :style="style">
        <div class="clear">
          <div class="fl">
            <span class="c_tip">医嘱内容</span>
            <el-input v-model="queryJson.OrdderName" clearable type="text" placeholder="医嘱内容" />
          </div>
          <div class="fl">
            <span class="c_tip">用法用量</span>
            <el-input v-model="queryJson.UsagDosage" clearable type="text" placeholder="用法用量" />
          </div>
          <div class="fl">
            <span class="c_tip">备注类型</span>
            <el-select
              v-model="queryJson.RemarksType"
              filterable
              clearable
              placeholder="请选择"
              class="c_select"
            >
              <el-option
                v-for="item in RemarksTypeList"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="fl">
            <span class="c_tip">处理状态</span>
            <el-select
              v-model="queryJson.RemarksStatus"
              filterable
              clearable
              placeholder="请选择"
              class="c_select"
            >
              <el-option
                v-for="item in RemarksStatusList"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="fl" style="margin-left: 10px">
            <el-button type="primary" class="btn_clear" @click="btnGetWardRoundRemarksList">查询</el-button>
            <el-button type="danger" class="btn_clear" @click="clearFun">重置</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="list_tip clear" />
    <div class="wrapper">
      <Bluetable
        ref="blueTable"
        :t-data="WardRoundRemarksList"
        :t-head="WardRoundRemarksListHeader"
        @operateClick="operateClickWardRoundRemarksList"
      />
      <pagination
        :total="queryPage.total"
        :page.sync="queryPage.pagenum"
        :limit.sync="queryPage.pagesize"
        @pagination="pageWardRoundRemarksList"
      />
    </div>
    <el-dialog title="处理意见" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form :model="Handlingopinions">
        <el-form-item label="处理意见" :label-width="formLabelWidth">
          <el-input v-model="Handlingopinions" autocomplete="off" type="textarea" height="90%" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="HandleWardRoundRemarks">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { GetWardRoundRemarksList, HandleWardRoundRemarks, SaveWardRoundRemarks } from '@/api/cpw'
export default {
  name: 'WardRoundRemarksList',
  data() {
    return {
      Userid: '',
      Username: '',
      queryJson: {
        OrdderName: '',
        UsagDosage: '',
        RemarksType: '调整用法用量',
        RemarksStatus: '未处理'
      },
      RemarksTypeList: [
        {
          key: '1',
          value: '调整用法用量'
        }, {
          key: '2',
          value: '改变药品'
        }, {
          key: '3',
          value: '药品停用'
        }],
      RemarksStatusList: [
        {
          key: '1',
          value: '未处理'
        }, {
          key: '2',
          value: '处理'
        }],
      queryPage: {
        pagenum: 1,
        pagesize: 10,
        total: 0
      },
      WardRoundRemarksList: [],
      WardRoundRemarksListHeader: [
        {
          operate: ['处理', '删除'],
          label: '操作',
          link: true,
          width: '100px'
        }, {
          prop: 'remarkstype',
          label: '备注类型'
        }, {
          prop: 'remarks',
          label: '备注说明'
        }, {
          prop: 'patientname',
          label: '病人姓名'
        }, {
          prop: 'inpno',
          label: '住院号'
        }, {
          prop: 'bedno',
          label: '床号'
        }, {
          prop: 'ordername',
          label: '医嘱内容'
        }, {
          prop: 'usagedosage',
          label: '用法用量'
        }, {
          prop: 'startdate',
          label: '开嘱时间',
          width: '90px'
        }, {
          prop: 'remarkdate',
          label: '备注日期',
          width: '90px'
        }, {
          prop: 'remarkstatus',
          label: '处理状态'
        }, {
          prop: 'handlingopinions',
          label: '处理意见'
        }
      ],
      Handlingopinions: '',
      Id: '',
      pType: '11',
      sbtnFlag: false,
      style: 'height: 60px;padding-top: 10px;',
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  mounted() {
    const userInfo = localStorage.getItem('user')
    this.Username = JSON.parse(userInfo).real_name
    this.Userid = JSON.parse(userInfo).user_no
    this.btnGetWardRoundRemarksList()
  },
  activated() {
    const userInfo = localStorage.getItem('user')
    this.Username = JSON.parse(userInfo).real_name
    this.Userid = JSON.parse(userInfo).user_no
    this.btnGetWardRoundRemarksList()
  },
  methods: {
    operateClickWardRoundRemarksList(val, row) {
      this.Id = row.id
      if (val === '处理') {
        this.showDialog()
      } else if (val === '删除') {
        this.SaveWardRoundRemarks()
      }
    },
    showDialog() {
      this.dialogFormVisible = true
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.Id = ''
      this.Handlingopinions = ''
    },
    async HandleWardRoundRemarks() {
      await HandleWardRoundRemarks({
        json: {
          Userid: this.Userid,
          Username: this.Username,
          Id: this.Id,
          Handlingopinions: this.Handlingopinions
        }
      }).then(res => {
        if (res === '保存成功') {
          this.$message({
            message: res,
            type: 'success'
          })
        } else {
          this.$message({
            message: res,
            type: 'error'
          })
        }
        this.closeDialog()
        this.GetWardRoundRemarksList()
      }).catch(err => {
        console.log(err)
      })
    },
    async SaveWardRoundRemarks() {
      await SaveWardRoundRemarks({
        json: {
          Userid: this.Userid,
          Username: this.Username,
          Id: this.Id,
          Status: '0'
        }
      }).then(res => {
        if (res === '保存成功') {
          this.$message({
            message: res,
            type: 'success'
          })
        } else {
          this.$message({
            message: res,
            type: 'error'
          })
        }
        this.GetWardRoundRemarksList()
      }).catch(err => {
        console.log(err)
      })
    },

    pageWardRoundRemarksList(type) {
      this.queryPage.pagenum = type.page
      this.queryPage.pagesize = type.limit
      this.GetWardRoundRemarksList()
    },
    btnGetWardRoundRemarksList() {
      this.queryPage = {
        pagenum: 1,
        pagesize: 10,
        total: 0
      }
      this.GetWardRoundRemarksList()
    },
    async GetWardRoundRemarksList() {
      await GetWardRoundRemarksList({
        pagesize: this.queryPage.pagesize,
        pagenum: this.queryPage.pagenum,
        json: {
          OrdderName: this.queryJson.OrdderName,
          UsagDosage: this.queryJson.UsagDosage,
          RemarksType: this.queryJson.RemarksType,
          RemarksStatus: this.queryJson.RemarksStatus
        }
      }).then(res => {
        this.WardRoundRemarksList = res.WardRoundRemarksList
        this.queryPage.total = res.records
      }).catch(err => {
        console.log(err)
      })
    },
    clearFun() {
      this.queryJson = {
        OrdderName: '',
        UsagDosage: '',
        RemarksType: '',
        RemarksStatus: ''
      }
    },
    showMore() {
      this.sbtnFlag = true
      this.style = ''
    },
    showHide() {
      this.sbtnFlag = false
      this.style = 'height: 60px;padding-top: 10px;'
    }
  }
}
</script>

<style lang="scss" scoped="scoped">

  body{
    background:#e6edf5;
  }
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      line-height:40px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
        line-height:65px;
      }
      .c_right{
        overflow:hidden;
        color:#636365;
        border-left:1px solid #e6edf5;
        padding:15px 0;
        position:relative;
        .show_btn{
          position:absolute;
          right:20px;
          bottom:15px;
          border:1px solid #e1e1e1;
          background:#f9fafc;
          border-radius:2px;
          text-align:center;
          line-height:32px;
          width:104px;
          height:32px;
          font-size:14px;
          color:#9f9f9f;
          cursor: pointer;
        }
        .fl{
          margin-bottom:10px;
        }
        .c_tip{
          display:inline-block;
          width:80px;
          padding-right:10px;
          text-align:right;
        }
        .c_input{
          width:131px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }
        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:90px;
        }
        .c_searchbtn{
          display:inline-block;
          width:34px;
          height:25px;
          margin-left:3px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:230px;
          height:40px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          width:60px;
          height:40px;
          line-height:40px;
        }
        .sbtn_box{
          text-align:left;
          padding-left:82px;
        }
        .c_select{
          width:130px;
        }
        @media screen and (min-width:1466px){
          .c_select{
            width:150px;
          }
          .btn_clear{
            padding:0;
            width:70px;
            height:40px;
            line-height:40px;
          }
          .c_input{
            width:150px;
          }
          .c_search{
            width:100px;
          }
          .c_searchbtn{
            width:42px;
            margin-left:4px;
          }
          .c_tip{
            width:100px;
          }
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }
    .table_box{
      padding:0 18px;
    }
  }
  .wrapper{
    margin: 0 20px;
  }
  .el-checkbox__label{
    padding-left:5px;
  }
  .el-checkbox{
    margin-right:10px;
  }
  /deep/.el-input{
    width:150px;
    height:40px;
    border-radius:4px;
    padding-left:5px;
    font-size: 12px;
  }
  /deep/ .el-card__body{
    padding: 0;
    margin-top: 5px;
    display: flex;
    background-color: #FFFFFF;
    border-radius: 5px;
    height: 100px;
  }

</style>
